<template>
    <view class="store-gallery">
        <!-- 店铺陈列 -->
        <view class="store-gallery-content">
            <view class="header">
                <text class="title">店铺陈列图片</text>
                <view class="upload-btn" @click="handleTarget(1)">上传图片</view>
            </view>
            <view class="image-grid" v-if="!showEmpty">
                <view class="image-item" v-for="(item, index) in imagesList" :key="index"
                    @click="handleTarget(2, item)">
                    <image :src="item.imgUrl" mode="aspectFill" />
                </view>
            </view>
            <view v-else class="empty-container flex justify-center items-center">
                <Empty :emptyInfo="emptyInfo" />
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { IMG_URL2 } from "@/config";
import { shopApi } from "@/api";
import Empty from "@/components/empty.vue";
const imagesList = ref([])
let showEmpty = ref(false);

const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
    image: EmptyImage,
    width: 300,
    height: 300,
    tip: "还没有店铺陈列图片哦，快来添加吧~"
});

const previewImage = (index) => {
    uni.previewImage({
        urls: item.imgUrl,
        current: index
    })
}
const getData = () => {
    shopApi.SHOPGETSHOPPICLIST().then(res => {
        if (res.code == 200) {
            imagesList.value = res.result&&res.result.length>0?res.result:[]
            if (imagesList.value.length == 0){
                showEmpty.value = true
            } 
        } else {
            uni.showToast({ title: res.errMsg, icon: "none" });
        }
    })
}
const handleTarget = (type, item) => {
    if (type == 1) {
        uni.navigateTo({
            url: `/pagesshop/shopdisplay/details`
        });
    } else {
        console.log(item, 'item')
        uni.navigateTo({
            url: `/pagesshop/shopdisplay/details?item=${JSON.stringify(item)}`
        });
    }
}
onShow(() => {
    getData()

});
</script>

<style lang="scss" scoped>
.store-gallery {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 30rpx 0px;
    padding-bottom: 120rpx;
    box-sizing: border-box;

    .store-gallery-content {
        padding: 24rpx;
        box-sizing: border-box;

    }

    .empty-container {
        background: #ffffff;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .title {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
        }

        .upload-btn {
            background-color: rgba(214, 142, 68, 1);
            color: #fff;
            font-size: 28rpx;
            padding: 12rpx 30rpx;
            box-sizing: border-box;
            border-radius: 30rpx;
            border: none;

            &:active {
                opacity: 0.9;
            }
        }
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;

        .image-item {
            aspect-ratio: 1;
            background-color: #fff;
            border-radius: 12rpx;
            overflow: hidden;

            image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }



}
</style>